<template>
  <div class="subscribe" ga_event="follow_pgc">
    <div class="left-arrow" :class="{'subscribe-btn': !isFollowing, 'unsubscribe-btn': isFollowing}" @click="sendRequest">
      <tt-icon
        :type="isFollowing ? 'check' : 'add_small'"
        :size="isFollowing ? 8 : 12"
        :color="isFollowing ? '#777' : '#fff'"
      ></tt-icon><span>{{ text }}</span>
    </div>
  </div>
</template>
<script>
  import reqwest from 'reqwest';
  import Cookies from 'js-cookie';
  import checkLogin from '../../../src/js/user.js';

  export default {
    name: 'Subscribe',
    props: {
      userId: {
        required: true
      },
      follow: {
        type: Boolean,
        required: true
      }
    },
    data () {
      return {
        isFollowing: false
      };
    },
    created () {
      this.isFollowing = this.follow;
    },
    methods: {
      sendRequest () {
        const self = this;
        const action = self.isFollowing ? 'unfollow' : 'follow';
        const url = `/c/user/${action}/`;

        const request = () => {
          reqwest({
            headers: {'X-CSRFToken': Cookies.get('csrftoken')},
            url,
            method: 'post',
            data: {
              user_id: self.userId
            },
            success (rs) {
              if (rs && rs.message === 'success') {
                self.isFollowing = !self.isFollowing;
              }
            }
          });
        };

        checkLogin({
          successCb: () => {
            request();
          }
        });
      }
    },
    computed: {
      text () {
        return this.isFollowing ? '已关注' : '关注';
      }
    }
  };
</script>
<style lang="less">
  .subscribe{
    .left-arrow{
      width: 66px;
      border-radius: 3px;
      position: relative;
      font-size: 14px;
      cursor: pointer;
      &:before{
        content:"";
        position: absolute;
        border-style: solid;
        border-width: 4px;
        top: 7px;
        left:-9px;
      }
      span{
        font-size: 14px;
        vertical-align: middle;
        font-weight: normal;
        user-select: none;
      }
    }
    .unsubscribe-btn{
      width: 74px;
      border-radius: 3px;
      color: #777;
      height: 24px;
      border:1px solid #ddd;
      text-align: center;
      background-color: #fff;
      &:before{
        border-color: transparent #ddd transparent transparent;
      }
      &:after{
        content:"";
        position: absolute;
        border-style: solid;
        border-width: 4px;
        border-color: transparent #fff transparent transparent;
        top: 7px;
        left: -8px;
      }
      i{
        vertical-align: middle;
      }
      span{
        margin-left: 4px;
      }
    }
    .subscribe-btn{
      width: 74px;
      background: #2a90d7;
      color: #fff;
      height: 24px;
      border:1px solid #2a90d7;
      text-align: center;
      &:before{
        border-color: transparent #2a90d7 transparent transparent;
      }
      span{
        color: #fff;
      }
    }
  }

</style>



// WEBPACK FOOTER //
// subscribe.vue?0a054276
